<template>
	<div class="ml-30 pb-30">
		<div v-for="(item,index) in items" :key="index" class="flex mt-24">
			<img class="css-pic br-8" :src="item.picUrl"/>
			<div class="flex-1 ml-20 mr-30" v-if="type == 'confirm'">
				<p class="fs-32 pb-5">{{ item.name }}</p>
				<p class="fs-22 color-gray-light" >每人必点1份</p>
				<div class="flex-s-c mt-30">
					<p ><span class="css-pricefh">￥</span> 
						<span class="css-price">{{ item.price }}/{{ item.unit}}</span>
					</p>	
					<p class="fs-24">x {{ item.amount }}{{ item.unit }}</p>
				</div>
			</div>
			<div class="flex-1 ml-20 mr-30" v-if="type == 'place'">
				<p class="fs-32 pb-5">{{ item.name }}</p>
				<p class="fs-22 color-gray-light" >500毫升、常温</p>
				<div class="flex-s-c mt-30">
					<p >
						<span class="css-pricefh">￥</span> 
						<span class="css-price">{{item.price ? item.price.toFixed(2) : ''}}</span>
						<span class="fs-22 color-gray-light ml-10">x {{ item.amount }}</span>
					</p>	
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'indentList',
  components: {
  },
  props: {  
		items: {
      type: Array,
      required: true
    },
		type: {
      type: String,
      required: true
    },

  },
  data() {
    return {
  
    }
  },
  watch: {
 
  },
  created() {
		console.log('items',this.items)
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
.css-pic{
	width: 144px;
	height: 144px;
}
.css-pricefh{
	color: $red;
	font-size: 20px;
}
.css-price{
	color: $red;
	font-size: 28px;
}


</style>
